(function () {
  $(function () {
    var NewsCenterHandler = function (el, tempEl, paginationEl, paginationTempEl, typeBtn, typeBtnTemp) {
      // 该组件的原理如下：
      //   执行.changePage()方法，在闭包中修改storage.page对象，并执行.getAsserts()
      //   执行.changeType()方法，在闭包中修改storage.type对象,将storage.page初始化为1，并执行.getAsserts()方法
      //   执行.getAsserts()方法，page和type统一从storage中获取，ajax后执行各个render方法渲染视图。
      var storage = {
        el: $(el),
        tempEl: $(tempEl),
        paginationEl: $(paginationEl),
        paginationTempEl: $(paginationTempEl),
        typeBtn: $(typeBtn),
        typeBtnTemp: $(typeBtnTemp),
        page: 1,
        totalPage: 1,
        type: 0
      }
      if (!storage.el || !storage.tempEl) {
        alert('请正确设置')
        return
      }
      return {
        getCurrentPage: function () {
          return storage.page
        },
        getAsserts: function () {
          var _this = this
          // 这里进行异步请求获取。
          // storage.page 需要请求的页码数
          // storage.type 需要请求的数据种类（全部、行业动态等），数据来源：#type-btn-template中data-type属性
          $.ajax({
            url: '../../../newsList.json',
            type: 'GET',
            // data: {page: storage.page, type: storage.type},
            success: function (res) {
              console.log(res)
              // 渲染选择按钮
              _this.renderTypeBtn()
              // 渲染列表
              _this.renderPage(res.data)
              // 重新渲染分页器
              _this.renderPagination(storage.page, res.totalPage)
            }
          })
          // 示例
          // $.ajax({
          //   url: 'xxx',
          //   type: 'POST',
          //   data: {page: storage.page, type: storage.type},
          //   success: function(res) {
          //     console.log(res)
          //      // 渲染选择按钮
          //     _this.renderTypeBtn()
          //     _this.renderPage(res.data)
          //      //重新渲染分页器
          //     _this.renderPagination(page, res.totalPage)
          //   }
          // })
        },
        changePage: function (page) {
          // 用于切换页面
          storage.page = page
          this.getAsserts()
        },
        changeType: function (type) {
          // 切换栏目
          storage.type = type
          storage.page = 1
          this.getAsserts()
        },
        renderPage: function (data) {
          // 渲染列表
          var resource = storage.tempEl.html()
          var html = template.render(resource, { data: data });
          storage.el.html(html)
        },
        renderTypeBtn: function () {
          var resource = storage.typeBtnTemp.html()
          var html = template.render(resource, { type: storage.type });
          storage.typeBtn.html(html)
        },
        renderPagination: function (page, totalPage) {
          // 渲染分页器
          console.log('set page: ', page)
          console.log('set totalPage: ', totalPage)
          var resource = storage.paginationTempEl.html()
          var html = template.render(resource, { page: page, totalPage: totalPage, arr: new Array(totalPage) });
          storage.paginationEl.html(html)
        },
        initPage: function () {
          // 初始化
          console.log('page has been initialized')
          // 初始化过程中，如果url参数带有type字段，可渲染type对应的分类
          var type = $.getUrlParam('type')
          if (type) {
            // 传入url中带的type参数
            storage.type = type
          }
          this.getAsserts()
        }
      }
    }
    var newsCenter = new NewsCenterHandler('#news-center-list', '#news-center-list-item-template', '#pagination', '#pagination-template', '#types-btns', '#type-btn-template')
    // 创建运行实例
    newsCenter.initPage()
    // define events
    $('#pagination').on('click', '.page', function () {
      var page = $(this).data('page')
      newsCenter.changePage(page)
    })
    $('#pagination').on('click', '.perv', function () {
      var page = newsCenter.getCurrentPage()
      newsCenter.changePage(page - 1)
    })
    $('#pagination').on('click', '.next', function () {
      var page = newsCenter.getCurrentPage()
      newsCenter.changePage(page + 1)
    })
    $('#types-btns').on('click', '.news-btn', function () {
      var type = $(this).data('type')
      newsCenter.changeType(type)
    })
  })
})()